import { Space, Table, Tag, Popconfirm , message,Button,Checkbox, Form, Input} from 'antd';
import React from 'react';
import {useDispatch,useSelector} from "react-redux"
import { useEffect,useState} from "react"
import * as action from "../action"
import axios from 'axios';
import {debounce,throttle} from "lodash" // debounce就是防抖
import Dirlog from "../components/dirlog"


const Navigation1 = () => {
    const [edititem,setedititem] = useState({})
    const [editindex,setEditindex] = useState(0)
    const [isedit,setIsedit] = useState("新增")
    const confirm = (index) => {
        dispatch(action.delfn(index))
      };
     const eitfn = (item,index)=>{
        console.log(item,index);
        setedititem(item)
        setEditindex(index)
        setflag(true)
        setTimeout(() => {
            setIsedit("编辑")
        }, 100);
       
     }
    const [flag,setflag] = useState(false)
    const [colums,setCOLUMS] = useState( [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          render: (text) => <a>{text}</a>,
        },
        {
          title: 'address',
          dataIndex: 'address',
          key: 'age',
        },
        {
          title: 'date',
          dataIndex: 'date',
          key: 'date',
        },
        {
          title: 'Action',
          key: 'action',
          render: (_, record,index) => (
            <Space size="middle">
              <a onClick={()=>eitfn(record,index)}>编辑</a>
              <Popconfirm placement="topLeft" title={"您确定要删除吗？"} onConfirm={()=>confirm(index)} okText="Yes" cancelText="No">
                 <Button>删除</Button>
              </Popconfirm>
            </Space>
          ),
        },
      ])
     
     const store = useSelector((state)=>{
        return {
            ...state.tablereducer
        }
     })
     const dispatch = useDispatch()
     useEffect(()=>{
         dispatch(action.getlist())
     },[])

   const addfn = ()=>{
     setflag(true)
     setIsedit("新增")
   }
   const showmodel = (data)=>{
        console.log(data)
        setflag(data)
   }
    return (
        <>
            <button onClick={debounce(addfn,500)}>增加</button>
            <button onClick={throttle(addfn,2000,{trailing:true,leading:false})}>节流点击</button>
            <Table columns={colums} dataSource={store.arr} />;
            <Dirlog flag={flag} showmodel={showmodel} edititem={edititem} editindex={editindex} isedit={isedit}></Dirlog>
        </>
    
    )
    
 
}

export default Navigation1
